<template>
  <!-- 冒险成语模拟器页面 -->
  <!-- 王旭 2023年9月15日17:05:56 -->
  <div class="bianji1">
    <div class="bianji2"></div>
    <div class="bianji3">第 {{ stageId }} 关</div>
    <div class="bianji2"></div>
    <div class="bianji5">
      <div class="bianli1" v-for="(character, index) in filteredCharacters(stageId)" :key="index" >
        <template v-if="index !== getCharacterIndexById(stageId)">
          {{ character }}
        </template>
        <template v-else>
          {{ characterDianji }}
        </template>
      </div>
    </div>
    <div class="bianji2"></div>
    <div class="bianji4">
      <div  class="shucu"  v-for="(item, index) in randomizedCharacters" :class="'item-' + index"  :key="index"  :style="{ backgroundColor: backgroundColor }" @click="handleClickCharacter(item)" >
        {{ item }}
      </div>
    </div>
    <el-dialog :title="title" :visible.sync="open" width="30%" :show-close="false">
        <div slot="title" style="color: red;text-align: center;">{{ title }}</div>
        <div style="font-size: 16px; font-weight: bolder; text-align: center;">
          <span v-for="p in pin" :key="p">{{ p }}</span>
        </div>
        <div  style="font-size: 25px;font-weight: bolder;text-align: center;"><span>{{ currentLevelIdiomList.idiomAdventureValue }}</span></div>
        <div style=" height: 10px;"></div>
        <div><span style="font-size: 16px;font-weight: bolder;">成语释义:</span></div>
        <div style=" height: 5px;"></div> 
        <div>
          {{currentLevelIdiomList.idiomAdventureInterpretation}}
        </div>
        <div style=" height: 10px;"></div>
        <div><span style="font-size: 16px;font-weight: bolder;">成语出处:</span></div>
        <div style=" height: 5px;"></div> 
        <div>
          {{currentLevelIdiomList.idiomAdventureSource}}
        </div>
        <div style=" height: 10px;"></div>
        <div class="button-container">
          <el-button type="primary" @click="confirm">确定</el-button>
          <el-button @click="cancelAll">取消</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<script>
import { pinyin } from 'pinyin-pro';
export default {
  data() {
    return {
      // 字体背景色
      backgroundColor: '',
       // 查询到的10个成语
      idiomAdventureQuestionBankRadomByTenList: [],
      // 关卡
      stageId: 1,
      // 正确字
      characterTrue: "",
      // 存入随机顺序的正确字和同音字
      randomizedCharacters: [],
      // 点击的字
      characterDianji: "",
      // 同音字
      homophonevalue: "",
      // 当前关卡释义出处
      currentLevelIdiomList:{},
      // 弹出框标题
      title: '',
      // 是否显示弹出层
      open: false,
      pin: []
    };
  },
  created() {
    this.selectIdiomAdventureQuestionBankRadomByTen();
  },

  methods: {
    // 字体点击事件
    handleClickCharacter(characterid) {
      this.characterDianji = characterid;
      // 判断当前字是否与成语字一致
      if (this.characterDianji === this.characterTrue) {
        if (this.stageId === 10) {
          this.$confirm("恭喜通关！", "提示", {
            confirmButtonText: "确定",
            type: "success",
          }).then(() => {
            // 在这里执行确认后的操作
            this.$router.push('/idiomAdventureQuestionBank')
          });
        } else {
          // 下一关
          this.stageId = this.stageId + 1;
          this.characterDianji = "";
          this.randomizedCharacters = [];
          this.filteredCharacters(this.stageId);
          this.getCharacterIndexById(this.stageId);
          this.getCharacterById(this.stageId);
          this.getHomophoneById(this.stageId);
          this.getRandomizedCharacters();
        }
      } else {
        this.pin = []
        this.currentLevelIdiom(this.stageId)
        this.title = "通关失败！是否重新开启关卡？"
        this.open = true
      }
    },
    // 确定按钮
    confirm () {
      this.open = false
       // 重新开始操作
       this.selectIdiomAdventureQuestionBankRadomByTen();
            this.stageId = 1;
            this.characterDianji = "";
    },
    // 取消按钮
    cancelAll () {
      this.open = false
      // 退出操作
      this.$router.push('/idiomAdventureQuestionBank')
    },
    // 随机查询10个成语
    selectIdiomAdventureQuestionBankRadomByTen() {
      this.$axios
        .get(
          "/IdiomAdventureQuestionBank/selectIdiomAdventureQuestionBankRadomByTen"
        )
        .then((res) => {
          const questionList = res.data.data;
          let aid = 1; // 自增主键的初始值

          this.idiomAdventureQuestionBankRadomByTenList = questionList.map(
            (question) => {
              question.aid = aid++;
              return question;
            }
          );
        })
        .then(() => {
          this.filteredCharacters(this.stageId);
        })
        .then(() => {
          this.getCharacterIndexById(this.stageId);
        })
        .then(() => {
          this.getCharacterById(this.stageId);
          this.getHomophoneById(this.stageId);
        })
        .then(() => {
          this.randomizedCharacters = [];
          this.getRandomizedCharacters();
        });
    },
        // 查看成语释义出处
      currentLevelIdiom (stageId) {
        this.currentLevelIdiomList = this.idiomAdventureQuestionBankRadomByTenList[stageId - 1];
        const aa=this.currentLevelIdiomList.idiomAdventureValue;
        this.pin = pinyin(aa, {
          type: 'array'
        })
    },
    // 四个遍历字
    filteredCharacters(stageId) {
      const filteredIdioms =
        this.idiomAdventureQuestionBankRadomByTenList.filter(
          (question) => question.aid === stageId
        );
      if (filteredIdioms.length > 0) {
        const idiomAdventureValue = filteredIdioms[0].idiomAdventureValue;
        return idiomAdventureValue.split("");
      }
      return [];
    },
    // 正确字的下标
    getCharacterIndexById(stageId) {
      const filteredIdioms =
        this.idiomAdventureQuestionBankRadomByTenList.filter(
          (question) => question.aid === stageId
        );
      if (filteredIdioms.length > 0) {
        const idiomAdventureIndexId = filteredIdioms[0].idiomAdventureIndexId;
        return idiomAdventureIndexId;
      }
      return -1;
    },
    // 正确字
    getCharacterById(stageId) {
      const filteredIdioms =
        this.idiomAdventureQuestionBankRadomByTenList.filter(
          (question) => question.aid === stageId
        );
      if (filteredIdioms.length > 0) {
        const idiomAdventureIndexId = filteredIdioms[0].idiomAdventureIndexId;

        // 在这里选择对应字符的逻辑
        const character =
          this.filteredCharacters(stageId)[idiomAdventureIndexId];
        this.characterTrue = character;
        return character;
      }
      return "";
    },
    // 同音字
    getHomophoneById(stageId) {
      const filteredIdioms =
        this.idiomAdventureQuestionBankRadomByTenList.filter(
          (question) => question.aid === stageId
        );
      if (filteredIdioms.length > 0) {
        const homophone = filteredIdioms[0].homophone;
        this.homophonevalue = homophone;
        return homophone;
      }
      return "";
    },
   // 将同音字和正确字存入数组
    getRandomizedCharacters() {
      const combinedCharacters = [this.characterTrue, this.homophonevalue];
      this.randomizedCharacters = this.shuffleArray(combinedCharacters);
    },
    // 随机排序
    shuffleArray(array) {
      // 重新排序数组
      for (let i = array.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [array[i], array[j]] = [array[j], array[i]];
      }
      return array;
    },
  },
};
</script>

<style>
.bianji1 {
  width: 500px;
  height: 600px;
}
.bianji2 {
  width: 100%;
  height: 60px;
}
.bianji3 {
  width: 100%;
  height: 60px;
  text-align: center;
  font-size: 40px;
}
.bianji5 {
  width: 60%;
  height: 70px;
  margin-left: 20%;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-gap: 10px;
}
.bianli1 {
  border: 1px solid black;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  font-size: 30px;
  font-weight: bolder;
}
.bianji4 {
  width: 60%;
  height: 70px;
  margin-left: 20%;
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 10px;
}

.shucu {
  border: 1px solid black;
  width: 70px;
  text-align: center;
  font-size: 30px;
  font-weight: bolder;
  border-radius: 20px;
  padding: 10px;
  box-sizing: border-box;
}
.item-1 {
 margin-left: 150px;
}
.button-container {
  position: absolute;
  bottom: 10px;
  right: 10px;
}
</style>